/** 
 * 入参
    type： 1- 指令   2-簿记
    onOk：指令下达成功或簿记成功抛出事件
    onCancel：取消抛出事件

*/
import React, { PureComponent } from 'react';
import { AvailableAssetC, TradeHoldC, FirstHeaderC } from '../../../../comps';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Spin } from 'antd';
import style from './index.less';
import HeaderInfoC from './headInfoC';
import ActionC from './actionC';
import FinaFlockingInfoC from './finaFlockingInfoC';
import AddOrderC from './addOrder';
import { connect } from 'dva';
import 'moment/locale/zh-cn';
@Form.create()
@connect(({ finaFlockingM, loading }) => ({ finaFlockingM, loading }))
export default class AddFinaFlocking extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      timeStamp: new Date().getTime(), //时间戳
      money: {}, //可用金额，
      position: {}, //可用数量
      portfolio: undefined, //当前组合
      tradingcode: undefined, //当前证券代码 {exchangecode: "101", tradingcode: "510060", secuabbr: "上证中央企业50ETF"}
      info: undefined, //基础信息
      headInfo: undefined, //头部信息展示
      productGroupId: undefined, //产品组id
    };
  }

  //组合变更id 切换
  portfolioOnChange = (e) => {
    if (this.state.portfolio !== e) {
      //组合id不同则变更当前页面组合id
      this.setState({
        portfolio: e,
      });
    }
  };
  //产品组改变
  productGroupOnChange = (e) => {
    if (this.state.productGroupId !== e) {
      //组合id不同则变更当前页面组合id
      this.setState({
        productGroupId: e,
      });
    }
  };
  //证券代码变更
  tradingcodeOnChange = (e) => {
    if (this.state.tradingcode !== e) {
      //证券代码不同则变更当前页面证券代码
      this.setState({
        tradingcode: e,
      });
    }
    if (!e) {
      this.setState({
        info: undefined,
        headInfo: undefined,
      });
      return;
    }
    //证券代码变更 查询基础信息数据
    this.props.dispatch({
      type: 'finaFlockingM/queryBaseInfo',
      payload: {
        tradingCode: e.tradingCode,
        exchangeCode: e.exchangeCode,
      },
      callback: (data) => {
        if (data) {
          this.setState({
            info: data,
            headInfo: { tradingName: data.secuabbr, remainingTer: data.term, issueRate: data.couponRate },
          });
        }
      },
    });
  };
  //新建指令和簿记成功之后调用
  onOk = () => {
    const { type } = this.props;
    if (type == 2 || type == 11 || type == 12) {
      //簿记页面
      this.props.onOk();
    }
  };
  //点击取消按钮
  onCancel = () => {
    const { type } = this.props;
    if (type == 2 || type == 11 || type == 12) {
      //簿记页面
      this.props.onCancel();
    }
  };
  render() {
    const { info, portfolio, headInfo, tradingcode, productGroupId } = this.state;
    return (
      <div className={style.addFinaFlocking}>
        <div style={{ marginTop: '7px' }}>
          <div>
            <div>
              <Spin spinning={this.props.loading.effects['finaFlockingM/queryBaseInfo'] == true}>
                <FinaFlockingInfoC info={info} />
              </Spin>
            </div>
            <div>
              <ActionC
                tradingcode={tradingcode && tradingcode.tradingCode ? tradingcode.tradingCode : undefined}
                exchangecode={tradingcode && tradingcode.exchangeCode ? tradingcode.exchangeCode : undefined}
              />
            </div>
          </div>
          <div>
            <div style={{ marginBottom: '14px' }}>
              <AvailableAssetC
                portfolio={portfolio}
                type={this.props.type}
                productGroupId={productGroupId}
                onChange={(e) => {
                  this.setState({
                    money: e,
                  });
                }}
              />
            </div>
            <div style={{ marginBottom: '20px' }}>
              <TradeHoldC
                securityType={'7'} //理财直融
                type={this.props.type}
                portfolio={portfolio}
                productGroupId={productGroupId}
                tradingcode={tradingcode && tradingcode.tradingCode ? tradingcode.tradingCode : undefined}
                exchangecode={tradingcode && tradingcode.exchangeCode ? tradingcode.exchangeCode : undefined}
                onChange={(e) => {
                  this.setState({
                    position: { ...e },
                  });
                }}
              />
            </div>
            <FirstHeaderC title={'交易要素'} />
            <AddOrderC
              type={this.props.type}
              portfolioOnChange={this.portfolioOnChange}
              tradingcodeOnChange={this.tradingcodeOnChange}
              productGroupOnChange={this.productGroupOnChange}
              onRef={(ref) => {
                this.addOrder = ref;
              }}
              onOk={this.onOk}
              onCancel={this.onCancel}
              money={this.state.money}
              position={this.state.position}
            />
          </div>
        </div>
      </div>
    );
  }
}
